<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="Author" contect="http://www.webqin.net">
    <title>尚好房</title>
    <link rel="shortcut icon" href="./static/images/favicon.ico"/>
    <link type="text/css" href="./static/css/css.css" rel="stylesheet"/>
    <script type="text/javascript" src="./static/js/jquery.js"></script>
    <script type="text/javascript" src="./static/js/js.js"></script>
    <script type="text/javascript" src="./static/js/vue.js"></script>
    <script type="text/javascript" src="./static/js/axios.js"></script>
    <script type="text/javascript">
        $(function () {
            //导航定位
            $(".nav li:eq(1)").addClass("navCur");
        })
    </script>
</head>

<body>
<div id="list">
    <div class="header">
        <div class="width1190">
            <div class="fl">您好，欢迎来到尚好房！</div>
            <div class="fr" v-if="userInfo.nickName === ''">
                <a href="login.html">登录</a> |
                <a href="register.html">注册</a> |
                <a href="login.html">加入收藏</a> |
                <a href="javascript:;">设为首页</a>
            </div>
            <div class="fr" v-else>
                <a href="javascript:;">欢迎 {{userInfo.nickName}}</a> |
                <a href="register.html" @click="logout">退出</a> |
                <a href="follow.html">我的关注</a> |
                <a href="javascript:;">加入收藏</a> |
                <a href="javascript:;">设为首页</a>
            </div>
            <div class="clears"></div>
        </div><!--width1190/-->
    </div>
    <div class="list-nav">
        <div class="width1190">
            <div class="list"><h3>房源分类</h3></div><!--list/-->
            <ul class="nav">
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="contact.html">联系我们</a></li>
                <div class="clears"></div>
            </ul><!--nav/-->
            <div class="clears"></div>
        </div><!--width1190/-->
    </div><!--list-nav/-->
    <div class="banner" style="background:url(./static/images/ban.jpg) center center no-repeat;"></div>

        <div class="content">
            <div class="width1190">
                <form action="#" method="get" class="pro-search">
                    <table>
                        <tr>
                            <th>房源区域：</th>
                            <td>
                                <div style="line-height: 30px;">
                                    <a href="javascript:;" @click="searchArea('')" :class="houseQueryVo.areaId === ''? 'pro-cur':''">不限</a>
                                    <a href="javascript:;" @click="searchArea(item.id)" :class="item.id === houseQueryVo.areaId ? 'pro-cur':''" v-for="item in areaList" v-bind:key="item.id">{{ item.name }}</a>
                                </div>
                                <!--新增区域-->
                                <div style="font-size: 12px;border-top:#ccc 1px dotted;">
                                    <a href="javascript:;" @click="searchPlate(item.id)" :class="item.id === houseQueryVo.plateId ? 'pro-cur':''" v-for="item in plateList" v-bind:key="item.id" >{{item.name}}</a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>户型：</th>
                            <td>
                                <a href="javascript:;" @click="searchHouseType('')" :class="houseQueryVo.houseTypeId===''?'pro-cur':'' ">不限</a>
                                <a href="javascript:;" @click="searchHouseType(item.id)" :class="item.id === houseQueryVo.houseTypeId ? 'pro-cur':'' " v-for="item in houseTypeList" v-bind:key="item.id">{{item.name}}</a>
                            </td>
                        </tr>
                        <tr>
                            <th>楼层：</th>
                            <td>
                                <a href="javascript:;" @click="searchFloor('')"  :class="houseQueryVo.floorId === '' ? 'pro-cur' : '' ">不限</a>
                                <a href="javascript:;" @click="searchFloor(item.id)" :class="item.id === houseQueryVo.floorId ? 'pro-cur' : '' "  v-for="item in floorList" v-bind:key="item.id">{{item.name}}</a>
                            </td>
                        </tr>
                        <tr>
                            <th>建筑结构：</th>
                            <td>
                                <a href="javascript:;" @click="searchBuildStructure('')" :class="houseQueryVo.buildStructureId === '' ? 'pro-cur' : '' ">不限</a>
                                <a href="javascript:;" @click="searchBuildStructure(item.id)" :class="item.id === houseQueryVo.buildStructureId ? 'pro-cur' : '' "  v-for="item in buildStructureList" v-bind:key="item.id">{{item.name}}</a>
                            </td>
                        </tr>
                        <tr>
                            <th>朝向：</th>
                            <td>
                                <a href="javascript:;" @click="searchDirection('')" :class="houseQueryVo.directionId === '' ? 'pro-cur' : '' ">不限</a>
                                <a href="javascript:;" @click="searchDirection(item.id)" :class="item.id === houseQueryVo.directionId ? 'pro-cur' : '' "  v-for="item in directionList" v-bind:key="item.id">{{item.name}}</a>
                            </td>
                        </tr>
                        <tr>
                            <th>装修情况：</th>
                            <td>
                                <a href="javascript:;" @click="searchDecoration('')" :class="houseQueryVo.decorationId === '' ? 'pro-cur' : '' ">不限</a>
                                <a href="javascript:;" @click="searchDecoration(item.id)" :class="item.id === houseQueryVo.decorationId ? 'pro-cur' : '' "  v-for="item in decorationList" v-bind:key="item.id">{{item.name}}</a>
                            </td>
                        </tr>
                        <tr>
                            <th>房屋用途：</th>
                            <td>
                                <a href="javascript:;" @click="searchHouseUse('')" :class="houseQueryVo.houseUseId === '' ? 'pro-cur' : '' ">不限</a>
                                <a href="javascript:;" @click="searchHouseUse(item.id)" :class="item.id === houseQueryVo.houseUseId ? 'pro-cur' : '' "  v-for="item in houseUseList" v-bind:key="item.id">{{item.name}}</a>
                            </td>
                        </tr>
                        <tr>
                            <th>房源搜索：</th>
                            <td>
                                <label>
                                    <input type="text" v-model:value="houseQueryVo.keyword" placeholder="房源搜索"></input>
                                </label>
                                <label>
                                    <input type="button" @click="searchKeyword()" value="搜索"/>
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <th>价格：</th>
                            <td>
                                <a href="javascript:;" @click="searchPriceRange()" :class="(houseQueryVo.priceRange.length === 0 || houseQueryVo.priceRange.entries().length ===0) ? 'pro-cur' : '' ">不限</a>
                                <a href="javascript:;" v-for="item in priceRanges" @click="searchPriceRange(item)">{{item}}</a>
                                <!--<a href="javascript:;">1001-2000</a>-->
                                <label>
                                    <input type="text" v-model:value="houseQueryVo.priceLeftEndpoint" class="protext"/> - <input type="text" v-model:value="houseQueryVo.priceRightEndpoint" class="protext"/> 万元
                                </label>
                                <label>
                                    <input type="submit" class="proSub" @click="searchPriceRange()" value="确定"/>
                                </label>
                            </td>
                            <!--<td>
                                <a href="javascript:;" class="pro-cur">不限</a>
                                <a href="javascript:;" >500-1000</a>
                                <a href="javascript:;">1001-2000</a>
                                <a href="javascript:;">2001-3000</a>
                                <a href="javascript:;">3001-4000</a>
                                <label>
                                    <input type="text" class="protext"/> - <input type="text" class="protext"/> 元
                                </label>
                                <label>
                                    <input type="submit" class="proSub" value="确定"/>
                                </label>
                            </td>-->
                        </tr>
                        <tr>
                            <th>面积：</th>
                            <td>
                                <a href="javascript:;" @click="searchAreaRange()" :class="(houseQueryVo.areaRange.length === 0 || houseQueryVo.areaRange.entries().length ===0) ? 'pro-cur' : '' ">不限</a>
                                <a href="javascript:;" v-for="item in areaRanges" @click="searchAreaRange(item)">{{item}}</a>
                                <label>
                                    <input type="text" v-model:value="houseQueryVo.areaLeftEndpoint" class="protext"/> - <input type="text" v-model:value="houseQueryVo.areaRightEndpoint" class="protext"/> 平米
                                </label>
                                <label>
                                    <input type="submit" class="proSub" @click="searchAreaRange()" value="确定"/>
                                </label>
                            </td>
                            <!--<td>
                                <a href="javascript:;" class="pro-cur">不限</a>
                                <a href="javascript:;">10平方</a>
                                <a href="javascript:;">20-40平方</a>
                                <a href="javascript:;">41-60平方</a>
                                <a href="javascript:;">61-80平方</a>
                                <a href="javascript:;">100平方以上</a>
                                <label>
                                    <input type="text" class="protext"/> - <input type="text" class="protext"/> 元
                                </label>
                                <label>
                                    <input type="submit" class="proSub" value="确定"/>
                                </label>
                            </td>-->
                        </tr>
                    </table>
                    <div class="paixu">
                        <strong>排序：</strong>
                        <a href="javascript:;" @click="sortDefault()" :class="houseQueryVo.defaultSort === 1 ? 'pai-cur' : '' " class="pai-cur">默认 </a>
                        <a href="javascript:;" @click="sortPrice()" :class="houseQueryVo.priceSort === 1 ? 'pai-cur' : '' " >价格 &or;</a>
                        <a href="javascript:;" @click="sortTime()" :class="houseQueryVo.timeSort === 1 ? 'pai-cur' : '' " >最新 &or;</a>
                    </div>
                </form><!--pro-search/-->
            </div><!--width1190/-->
            <div class="width1190">
                <div class="pro-left">
                    <dl v-for="item in page.list" :key="item.id">
                        <dt><a v-bind:href="'info.html?id='+item.id"><img v-bind:src="item.defaultImageUrl" width="286" height="188"/></a></dt>
                        <dd>
                            <h3><a :href="'info.html?id='+item.id">{{item.name}}</a></h3>
                            <div class="pro-wei">
                                <!--小区表中没有小区图片-->
                                <img src="./static/images/weizhi.png" width="12" height="16"/> <strong class="red">{{item.communityName}}</strong>
                            </div>
                            <div class="pro-fang">{{item.buildArea}}平 {{item.houseTypeName}} {{item.floorName}} {{item.decorationName}} {{item.directionName}}</div>
                            <div class="pra-fa">发布时间：{{item.createTimeString}}</div>
                        </dd>
                        <div class="price">¥ <strong>{{item.totalPrice}}</strong><span class="font12">万元</span></div>
                        <div class="clears"></div>
                    </dl>
                    <!--<dl>
                        <dt><a href="info.html"><img src="./static/images/fang1.jpg" width="286" height="188"/></a></dt>
                        <dd>
                            <h3><a href="info.html">中装一室一厅，楼层好，采光足，稀缺房源</a></h3>
                            <div class="pro-wei">
                                <img src="./static/images/weizhi.png" width="12" height="16"/> <strong class="red">智慧园</strong>
                            </div>
                            <div class="pro-fang">100.00平 两室 高楼层 普通装修</div>
                            <div class="pra-fa">发布时间：2020-12-03</div>
                        </dd>
                        <div class="price">¥ <strong>290</strong><span class="font12">万元</span></div>
                        <div class="clears"></div>
                    </dl>-->

                </div><!--pro-left/-->
                <div class="pro-right">
                    <h2 class="right-title">新上房源</h2>
                    <div class="right-pro">
                        <dl>
                            <dt><a href="info.html"><img src="./static/images/fang8.jpg"/></a></dt>
                            <dd>
                                <h3><a href="info.html">中装一室一厅，楼层好，采光足，稀缺房源</a></h3>
                                <div class="pro-fang">一室一厅 38平 南</div>
                                <div class="right-price">90万元</div>
                            </dd>
                        </dl>
                        <dl>
                            <dt><a href="info.html"><img src="./static/images/fang7.jpg"/></a></dt>
                            <dd>
                                <h3><a href="info.html">中装两室，楼层好，采光足，稀缺房源</a></h3>
                                <div class="pro-fang">两室一厅 78平 南</div>
                                <div class="right-price">130万元</div>
                            </dd>
                        </dl>
                        <dl>
                            <dt><a href="info.html"><img src="./static/images/fang6.jpg"/></a></dt>
                            <dd>
                                <h3><a href="info.html">中装三室，楼层好，采光足，稀缺房源</a></h3>
                                <div class="pro-fang">三室一厅 98平 南</div>
                                <div class="right-price">190万元</div>
                            </dd>
                        </dl>
                    </div><!--right-pro/-->
                </div><!--pro-right/-->
                <div class="clears"></div>
                <ul class="pages">
                    <li>
                        <a href="javascript:;" v-if="page.hasPreviousPage" @click="fetchData(1)">首页</a>
                    </li>
                    <li>
                        <a href="javascript:;" v-if="page.hasPreviousPage" @click="fetchData(page.prePage)">上一页</a>
                    </li>
                    <li v-for="item in page.navigatepageNums" :class="item === page.pageNum ? 'page_active' : ''">
                        <a href="javascript:;" @click="fetchData(item)">{{item}}</a>
                    </li>
                    <li>
                        <a href="javascript:;" v-if="page.hasNextPage" @click="fetchData(page.nextPage)">下一页</a>
                    </li>
                    <li>
                        <a href="javascript:;" v-if="page.hasNextPage" @click="fetchData(page.pages)">尾页</a>
                    </li>
                </ul>
            </div><!--width1190/-->
        </div><!--content/-->

    <div class="footer">
        <div class="width1190">
            <div class="fl"><a href="index.html"><strong>尚好房</strong></a><a href="about.html">关于我们</a><a
                    href="contact.html">联系我们</a><a href="follow.html">个人中心</a></div>
            <div class="fr">
                <dl>
                    <dt><img src="./static/images/erweima.png" width="76" height="76"/></dt>
                    <dd>微信扫一扫<br/>房价点评，精彩发布</dd>
                </dl>
                <dl>
                    <dt><img src="./static/images/erweima.png" width="76" height="76"/></dt>
                    <dd>微信扫一扫<br/>房价点评，精彩发布</dd>
                </dl>
                <div class="clears"></div>
            </div>
            <div class="clears"></div>
        </div><!--width1190/-->
    </div><!--footer/-->
    <div class="copy">Copyright@ 2020 尚好房 版权所有 沪ICP备1234567号-0&nbsp;&nbsp;&nbsp;&nbsp;技术支持：XXX</div>
    <div class="bg100"></div>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#list",
        data: {
            areaList: [],
            plateList: [],
            houseTypeList: [],
            floorList: [],
            buildStructureList: [],
            directionList: [],
            decorationList: [],
            houseUseList: [],
            priceRanges:[
                '0-500 万元',
                '501-1000 万元',
                '1001-2000 万元',
                '2001-3000 万元',
                '3001-4000 万元',
                '4001 万元以上'
            ],
            areaRanges:[
                '0-30 平米',
                '31-60 平米',
                '61-90 平米',
                '91-120 平米',
                '121-150 平米',
                '151 平米以上'
            ],

            //接口返回的分页数据，在此声明
            page: {
                list: [],
                pageNum: 1,
                pageSize: 2, //方便测试分页
                pages: 1,
                navigatepageNums: [1, 2, 3, 4],
                prePage: 0,
                nextPage: 0,
                hasPreviousPage: false,
                hasNextPage: false,
                isFirstPage: false,
                isLastPage: false,
            },

            houseQueryVo: {
                areaId: '',
                plateId: '',
                houseTypeId: '',
                floorId: '',
                buildStructureId: '',
                directionId: '',
                decorationId: '',
                houseUseId: '',

                keyword: '',

                defaultSort: 1,
                priceSort: null,
                timeSort: null,

                priceLeftEndpoint: '',
                priceRightEndpoint: '',
                areaLeftEndpoint: '',
                areaRightEndpoint: '',
                priceRange: [],
                areaRange: [],
            },

            userInfo: {
                nickName:'',
            },
        },
        created() {
            this.fetchDictData();
            this.fetchData(1);
            this.login();
        },
        methods: {
            //每次进首页要查看登录信息
            login() {
                let userInfoString = window.localStorage.getItem("userInfo")
                if (!(userInfoString === null || userInfoString === '' || userInfoString === undefined)) {
                    this.userInfo = JSON.parse(userInfoString)
                }
            },
            logout() {
                var url = '/userInfo/logout'
                axios.get(url).then(response => {
                    window.localStorage.removeItem("userInfo")
                    window.location.href='index.html'
                })
            },

            //axios在then内部不能使用Vue的实例化的this,因为在内部this没有被绑定
            fetchDictData() {
                var that = this;
                var url = '/dict/findListByDictCode/';
                axios.get(url + 'beijing').then(response => {
                    that.areaList = response.data.data;
                });
                axios.get(url + 'houseType').then(response => {
                    that.houseTypeList = response.data.data;
                });
                axios.get(url + 'floor').then(response => {
                    that.floorList = response.data.data;
                });
                axios.get(url + 'buildStructure').then(function (response) {
                    that.buildStructureList = response.data.data
                });
                axios.get(url + 'direction').then(function (response) {
                    that.directionList = response.data.data
                });
                axios.get(url + 'decoration').then(function (response) {
                    that.decorationList = response.data.data
                });
                axios.get(url + 'houseUse').then(function (response) {
                    that.houseUseList = response.data.data
                });
            },
            fetchData(pageNum = 1) {
                this.page.pageNum = pageNum
                if (pageNum < 1) pageNum = 1
                var that = this
                axios.post('/house/list/'+pageNum+'/'+this.page.pageSize,this.houseQueryVo).then(response => {
                    this.page = response.data.data;
                })
            },
            searchPriceRange(item) {
                //判断一下item是否是null,如果是null,则利用左右端点查询leftEndpoint 和 rightEndpoint 查询
                if (item === null || item === undefined || item === '') {
                    console.log("left = ",this.houseQueryVo.priceLeftEndpoint);
                    console.log("right = ",this.houseQueryVo.priceRightEndpoint);
                    if ((this.houseQueryVo.priceLeftEndpoint === null || this.houseQueryVo.priceLeftEndpoint === undefined || this.houseQueryVo.priceLeftEndpoint === '') &&
                        !(this.houseQueryVo.priceRightEndpoint === null || this.houseQueryVo.priceLeftEndpoint === undefined || this.houseQueryVo.priceRightEndpoint === '')) {
                        //如果只有左端点等于null,
                        this.houseQueryVo.priceRange = ['',this.houseQueryVo.priceRightEndpoint]
                        this.fetchData(1)
                    } else if (!(this.houseQueryVo.priceLeftEndpoint === null || this.houseQueryVo.priceLeftEndpoint === undefined || this.houseQueryVo.priceLeftEndpoint === '') &&
                        (this.houseQueryVo.priceRightEndpoint === null || this.houseQueryVo.priceLeftEndpoint === undefined || this.houseQueryVo.priceRightEndpoint === '')) {
                        //如果只有右端点等于null,
                        this.houseQueryVo.priceRange = [this.houseQueryVo.priceLeftEndpoint,'']
                        this.fetchData(1)
                    } else if ((this.houseQueryVo.priceLeftEndpoint === null || this.houseQueryVo.priceLeftEndpoint === undefined || this.houseQueryVo.priceLeftEndpoint === '') &&
                        (this.houseQueryVo.priceRightEndpoint === null || this.houseQueryVo.priceLeftEndpoint === undefined || this.houseQueryVo.priceRightEndpoint === '')) {
                        //两端都为空,有两种情形
                        //1 是 输入值的时候,价格区间的两端都没有输入,直接点确定,
                        //2 是 点击 不限 按钮的时候,
                        //两种解决思路
                        //1 如果价格区间没有输入值,我将 其后的确定按钮 禁用即可
                        //2 是 没有输入点击确定按钮 和 点击不限按钮 我都让他查询所有
                        //清空上一次查询的值
                        this.houseQueryVo.priceRange = []
                        //查询所有
                        this.fetchData(1)
                        //return
                    } else {
                        this.houseQueryVo.priceRange = [this.houseQueryVo.priceLeftEndpoint, this.houseQueryVo.priceRightEndpoint]
                        this.fetchData(1)
                    }
                } else {
                    //能走到这一步,说明item不等于null,说明是超链接,不是输入
                    //501-1000 万元
                    console.log(item);
                    var split1 = item.split(' ')
                    if (!item.includes('-')) {
                        //说明是 4001 万元及以上
                        this.houseQueryVo.priceRange(item,)
                        this.fetchData(1)
                    } else {
                        console.log(split1);
                        var split2 = split1[0].split('-')
                        console.log(split2);
                        this.houseQueryVo.priceRange = split2;
                        this.fetchData(1)
                    }
                }
            },
            searchAreaRange(item) {
                //判断一下item是否是null,如果是null,则利用左右端点查询leftEndpoint 和 rightEndpoint 查询
                if (item === null || item === undefined || item === '') {
                    if ((this.houseQueryVo.areaLeftEndpoint === null || this.houseQueryVo.areaLeftEndpoint === undefined || this.houseQueryVo.areaLeftEndpoint === '') &&
                        !(this.houseQueryVo.areaRightEndpoint === null || this.houseQueryVo.areaLeftEndpoint === undefined || this.houseQueryVo.areaRightEndpoint === '')) {
                        //如果只有左端点等于null,
                        this.houseQueryVo.areaRange = ['',this.houseQueryVo.areaRightEndpoint]
                        this.fetchData(1)
                    } else if (!(this.houseQueryVo.areaLeftEndpoint === null || this.houseQueryVo.areaLeftEndpoint === undefined || this.houseQueryVo.areaLeftEndpoint === '') &&
                        (this.houseQueryVo.areaRightEndpoint === null || this.houseQueryVo.areaLeftEndpoint === undefined || this.houseQueryVo.areaRightEndpoint === '')) {
                        //如果只有右端点等于null,
                        this.houseQueryVo.areaRange = [this.houseQueryVo.areaLeftEndpoint,'']
                        this.fetchData(1)
                    } else if ((this.houseQueryVo.areaLeftEndpoint === null || this.houseQueryVo.areaLeftEndpoint === undefined || this.houseQueryVo.areaLeftEndpoint === '') &&
                        (this.houseQueryVo.areaRightEndpoint === null || this.houseQueryVo.areaLeftEndpoint === undefined || this.houseQueryVo.areaRightEndpoint === '')) {
                        //两端都为空,有两种情形
                        //1 是 输入值的时候,价格区间的两端都没有输入,直接点确定,
                        //2 是 点击 不限 按钮的时候,
                        //两种解决思路
                        //1 如果价格区间没有输入值,我将 其后的确定按钮 禁用即可
                        //2 是 没有输入点击确定按钮 和 点击不限按钮 我都让他查询所有
                        //清空上一次查询的值
                        this.houseQueryVo.areaRange = []
                        //查询全部
                        this.fetchData(1)
                        //return
                    } else {
                        this.houseQueryVo.areaRange = [this.houseQueryVo.areaLeftEndpoint, this.houseQueryVo.areaRightEndpoint]
                        this.fetchData(1)
                    }
                } else {
                    //能走到这一步,说明item不等于null,说明是超链接,不是输入
                    //501-1000 万元
                    console.log(item);
                    var split1 = item.split(' ')
                    if (!item.includes('-')) {
                        //说明是 4001 万元及以上
                        this.houseQueryVo.areaRange(item,)
                        this.fetchData(1)
                    } else {
                        console.log(split1);
                        var split2 = split1[0].split('-')
                        console.log(split2);
                        this.houseQueryVo.areaRange = split2;
                        this.fetchData(1)
                    }
                }
            },
            searchArea(id) {
                this.houseQueryVo.areaId = id
                this.houseQueryVo.plateId = ''
                this.fetchData(1)
                if (id === '') {
                    this.plateList = []
                    return
                }
                var that = this
                var url = '/dict/findListByParentId' + '/'
                axios.get(url + id).then(response => {
                    that.plateList = response.data.data;
                });
            },
            searchPlate(id) {
                this.houseQueryVo.plateId = id
                this.fetchData(1)
            },
            searchHouseType(id) {
                this.houseQueryVo.houseTypeId = id
                this.fetchData(1)
            },
            searchFloor(id) {
                this.houseQueryVo.floorId = id
                this.fetchData(1)
            },
            searchBuildStructure(id) {
                this.houseQueryVo.buildStructureId = id
                this.fetchData(1)
            },
            searchDirection(id) {
                this.houseQueryVo.directionId = id
                this.fetchData(1)
            },
            searchDecoration(id) {
                this.houseQueryVo.decorationId = id
                this.fetchData(1)
            },
            searchHouseUse(id) {
                //测试是否需要加 if(id === '') return
                //不能,因为每次都要传入houseQueryVo,每点击一次houseQueryVo都要变化一次,fetchData要拿一次数据,即使点的不限,也是最新的
                //houseQueryVo,用该字段对应的空'',去查数据
                this.houseQueryVo.houseUseId = id
                this.fetchData(1)
            },

            sortDefault() {
                this.houseQueryVo.defaultSort = 1
                this.houseQueryVo.priceSort = null
                this.houseQueryVo.timeSort = null
                this.fetchData(1)
            },
            sortPrice() {
                this.houseQueryVo.defaultSort = null
                this.houseQueryVo.priceSort = 1
                this.houseQueryVo.timeSort = null
                this.fetchData(1)
            },
            sortTime() {
                this.houseQueryVo.defaultSort = null
                this.houseQueryVo.priceSort = null
                this.houseQueryVo.timeSort = 1
                this.fetchData(1)
            },
            searchKeyword() {
                //this.houseQueryVo.keyword = e.target.value
                this.fetchData(1)
            }
        },
    })
</script>
</html>